<template>
    <div class="header">
        <div class="logo">

        </div>
        <div class="operation_list">
            <ul>
                <li @click="goToprice"><p>升级套餐</p></li>
                <li  v-if="!isLogin" class="pointer" @click="goToPan()"><p>进入云盘</p></li>
                <li v-if="!isLogin" class="fenge pointer" @click="login"><p>登录</p></li>
                <li v-if="!isLogin" class="fenge pointer" @click="signUp"><p>注册</p></li>
                <li><p>客户端下载</p></li>
            </ul>
        </div>
    </div>
</template>

<script>
  import Cookie from 'js-cookie';

  export default {
    data() {
      return {
        isLogin: false
      }
    },
    mounted() {
      const token = Cookie.get('access_token', 'ddbes.com')
      if (token && token !== '') {
        this.isLogin = true
      } else {
        this.isLogin = false
        // return window.location.href = this.$config.loginUrl + '?redirect_uri=' + encodeURIComponent(`${window.location.href}`)
      }
    },
    methods: {
      login: function () {
        window.location.href = this.$config.loginUrl + '?redirect_uri=' + window.location.href
      },
      signUp: function () {
        window.location.href = this.$config.register
      },
      goToPan:function () {
        this.$router.push({
          path: "/cloudSpace/detail/1"
        });
      },
      goToprice:function () {
        window.location.href = 'https://pan.ddbes.com/price.html'
      }
    }

  }
</script>

<style scoped>
    .header {
        height: 60px;
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #E8EAEB;
    }

    .header .logo {
        width: 142px;
        height: 24px;
        background: url("../assets/icon/share/logo.png") no-repeat;
        background-size: 100%;
    }

    .operation_list {
    }

    .operation_list ul li {
        padding: 0 10px;
        float: left;
    }

    .operation_list ul li p {
        color: #666;
        font-size: 14px;
        cursor: pointer;
    }

    .operation_list ul li p:hover {
        color: #EF7269;
    }

    .fenge {
        border-right: 1px solid #666;
    }
</style>
